(function($) {
  function Slider(options) {
    this.opt = $.extend({
      gutter: 0,
      navWidth:70
    }, options);
    var t = this;
    var currentIndex = 0;
    var lastIndex = t.opt.element.children().length - t.opt.num;
    var itemWidth = Math.ceil((t.opt.width-(t.opt.num-1) * t.opt.gutter) / t.opt.num);
    var ulWidth = t.opt.element.children().length*(itemWidth+t.opt.gutter);
    
    function _animate(d){
      var _l = -1*currentIndex*(itemWidth+t.opt.gutter);
      t.opt.element.animate({
        left: _l
      });
    }

    function _layout() {
      var el = t.opt.element;
      var $container = $("<div></div>").css({
        width: t.opt.width,
        height: t.opt.height,
        overflow: "hidden",
        position: "relative",
        marginLeft:"58px"
      });
      el.wrap($container);
      el.css({
        width: ulWidth
      });
      
      el.children().css({
        display: "inline-block",
        width: itemWidth,
        marginRight: t.opt.gutter
      });
    }
    _layout();
    return {
      prev: function() {
        if(currentIndex == 0){
          return;
        }
        currentIndex--;
        _animate(-1);
      },
      next: function() {
        if(currentIndex == lastIndex){
          return;
        }
        currentIndex++;
        _animate(1);
      }
    }
  }
  $.fn.hslider = function(options) {
    options = options || {};
    options.element = this;
    var inst = new Slider(options);
    this.data('hslider', inst);
    return this;
  }
})(jQuery);


$(function() {

  if(global.W > 1023){
    $('.news-gally').hslider({
      width: 884,
      height: 383,
      gutter: 10,
      num: 3
    });

    function _move(d){
      var inst = $('.news-gally').data('hslider');
      d > 0 ? inst.next() : inst.prev();
    }

    $('.prev').click(function(){
      _move(-1);
    });
    $('.next').click(function(){
      _move(1);
    });
  }
});